<template>
    <div>
        <el-row>
            <el-col :span="21">
                <el-form :inline="true" label-width="90px">
                    <draggable :list="list" ghost-class="ghost" chosen-class="chosenClass" animation="300" @end="onEnd">
                        <template #item="{ element }">
                            <el-form-item :label="element.name" class="item">
                                <slot name="input" :element="element">
                                    <el-input v-if="element.type == 'text'" :style="element.style"
                                        v-model="element.form" :placeholder="element.placeholder"></el-input>
                                </slot>
                            </el-form-item>
                        </template>
                    </draggable>
                </el-form>
            </el-col>
            <el-col :span="3">
                <slot>
                    <draggable :list="list2" ghost-class="ghost" chosen-class="chosenClass" animation="300"
                        @end="onEnd">
                        <template #item="{ element }">
                            <span>
                                <slot name="button">
                                    <el-button type="primary" @click="">{{ element.name }}</el-button>
                                </slot>
                            </span>
                        </template>
                    </draggable>
                </slot>
            </el-col>
        </el-row>
    </div>
</template>
  
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import draggable from "vuedraggable";
/*
draggable 对CSS样式没有什么要求万物皆可拖拽
:list="state.list"         //需要绑定的数组
ghost-class="ghost"        //被替换元素的样式
chosen-class="chosenClass" //选中元素的样式
animation="300"            //动画效果
@start="onStart"           //拖拽开始的事件
@end="onEnd"               //拖拽结束的事件
*/
const list = ref([]);
const list2 = ref([
    { name: '重置' },
    { name: '搜索' }
])

const props = defineProps(['list'])

//拖拽结束的事件
const onEnd = () => {
    localStorage.setItem('INPUT', JSON.stringify(list.value))
};

onMounted(() => {
    list.value = JSON.parse(localStorage.getItem('INPUT') as string) || props.list
})

</script>

<style lang="scss" scoped>
.item:hover {
    cursor: move;
}

.ghost {
    border: solid 1px #f1f1f1;
}

.chosenClass {
    background-color: #f1f1f1;
}
</style>